<template>
     <div class="title-div">
        <div style="margin-left: 50px; margin-top: 80px; font-size: 50px; font-weight: bolder;">黑暗之中，唯有冒险者的勇气与智慧</div>
        <div style="justify-self: flex-start; margin-left: 50px; font-size: 20px;">本站是一个TRPG游戏平台，为玩家提供多种不同类型的剧本，欢迎来体验！</div>
     </div>
     <div class="charactor-div">
        <img style="margin-top: 100px;" src="../../assets/charactor.jpg" height="450px"/>
        <div style="font-size: 50px; font-weight: bolder; margin-left: 100px; margin-top: 250px; display: block;">
            <div>创建你的下一个角色！</div>
            <a-button ghost size="large" style="color: white; margin-top: 50px;" @click="skip2Charactor">试试看！</a-button>
        </div>
     </div>
     <div class="script-div">
        <div style="font-size: 50px; font-weight: bolder;">热门剧本推荐</div>
        <a-button ghost size="large" style="color: white; margin-top: 100px;" @click="skip2Scripts">去看看！</a-button>
     </div>
     <div class="room-div">
        <div style="display: block">
            <div style="font-size: 50px; font-weight: bolder;">一场冒险正在等着你呢！</div>
            <div style="font-size: 30px; margin-top: 30px;">去看看正在招募玩家的房间，或者自己创建一个</div>
            <a-button ghost size="large" style="color: white; margin-top: 50px;" @click="skip2Rooms">下一场冒险……</a-button>
        </div>
     </div>
     <div class="forum-div">
        <img src="../../assets/bar.jpg" height="500px"/>
        <div style="font-size: 50px; font-weight: bolder; margin-top: 50px;">到酒馆坐坐</div>
        <div style="font-size: 25px; margin-top: 20px;">在论坛里与其他玩家交流</div>
        <a-button ghost size="large" style="color: white; margin-top: 50px;" @click="skip2Forum">在火炉旁坐下</a-button>
     </div>
</template>

<script lang="ts">
    export default {
        name: 'MainPage',
    }
</script>

<script lang="ts" setup>
    import router from '@/router/index';
    import { message } from 'ant-design-vue';
    
    const skip2Charactor = () => {
        if (localStorage.getItem('authorization') === null) {
            message.error("请先登录！")
        } else {
            router.push( {name: 'character'} )
        }
    }

    const skip2Scripts = () => {
        if (localStorage.getItem('authorization') === null) {
            message.error("请先登录！")
        } else {
            router.push( {name: 'scripts'} )
        }
    }

    const skip2Rooms = () => {
        if (localStorage.getItem('authorization') === null) {
            message.error("请先登录！")
        } else {
            router.push( {name: 'rooms'} )
        }
    }

    const skip2Forum = () => {
        if (localStorage.getItem('authorization') === null) {
            message.error("请先登录！")
        } else {
            router.push( {name: 'forum'} )
        }
    }
</script>

<style scoped>
.title-div{
    background-image: url('../../assets/star_field_background.jpg');
    background-color: black;
    color: whitesmoke;
    margin-top: 0px;
    height: 300px;
    display: grid;
    flex-wrap: wrap;
    justify-content: left;
}
.charactor-div {
    background-color: black;
    color: whitesmoke;
    margin-top: 0px;
    height: 700px;
    display: flex;
    justify-content: center;
}
.script-div {
    background-color: black;
    color: whitesmoke;
    margin-top: 0px;
    height: 500px;
    display: block;
    flex-wrap: wrap;
    justify-content: center;
}
.room-div {
    background-color: black;
    color: whitesmoke;
    margin-top: 0px;
    height: 500px;
    display: flex;
    justify-content: center;
}
.forum-div {
    background-color: black;
    color: whitesmoke;
    margin-top: 0px;
    height: 800px;
    display: block;
    flex-wrap: wrap;
    justify-content: center;
}
</style>